<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {

    }
  </style>
</head>
<body>
  <button id="btn">按钮</button>
  <div id="box">
    <ul id="wrap">
    </ul>
  </div>

</body>
</html>
<script>
// 知识拓展：
  // undefined.xx 会报错
  // ES6 的解决办法： variable?.xx?.xx  就避免了上面的报错
  var obj = {
    child: {
      age: 28
    }
  };
  // console.log(obj?.xx?.xx);



var arr = [
  {
    name: 'Jack',
    age: 18,
    gender: '男'
  },{
    name: 'Rose',
    age: 20,
    gender: '女'
  },{
    name: 'Tom',
    age: 22,
    gender: '男'
  },
  {
    name: 'tony',
    age: 24,
    gender: '男'
  },
  {
    name: 'mark',
    age: 27,
    gender: '男'
  }
];
// var box = document.querySelector('.box');
var wrap = document.querySelector('#wrap');

// var result = arr.map(function(item) {
//   return `<li>
//     <span>名字：</span>
//     <span>${item.name}</span>
//   </li>`;
// }).join('');

// wrap.innerHTML = result;
// console.log('wrap', result);

function createLi(arr, options) {
  // React: DOM 和 JS  结合到了一起  ->  JSX   ->  JS + XML(document)
  wrap.innerHTML = arr.map(function(item) {
    return `<li data-msg=${JSON.stringify(item)}>
      <span>${options?.name || '名字'}：</span>
      <span>${item[options?.key || 'name']}</span>
    </li>`;
  }).join('');
}


document.querySelector('#btn').onclick = function() {
  console.log('click btn');
  createLi(arr, {
    name: '姓名',
    key: 'name'
  });
}

</script>